<template>
  <div class="app-container table-app-container">
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>出库申请</span>
          <el-button size="mini" style="float:right" @click="processImg">流程图</el-button>
          <el-button size="mini" style="float:right" @click="openHistory">审批记录</el-button>
        </div>
        <el-form ref="myform" :model="formItem" label-width="120px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="标题" prop="name">
                <el-input v-model="formItem.name" placeholder="请输入标题" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工单号" prop="code">
                <el-input v-model="formItem.code" placeholder="请输入工单号" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="申请人" prop="applyUserName">
                <el-input v-model="formItem.applyUserName" placeholder="请输入申请人" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="申请时间" prop="createTime">
                <el-date-picker v-model="formItem.createTime" format="yyyy-MM-dd HH:mm:ss" type="date" placeholder="选择申请时间" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="使用人" prop="useUserName">
                <el-input v-model="formItem.useUserName" placeholder="请选择使用人" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="领用事由及用途" prop="reason">
                <el-input v-model="formItem.reason" placeholder="请输入领用事由及用途" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="出库资产">
                <el-table :data="formItem.assetList" size="mini" style="width: 100%">
                  <el-table-column v-for="(item,index) in insideColumns" :key="index" :prop="item.key" :render="item.render" :label="item.title" width="80" />
                </el-table>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <FormDialog title="流程进展图" :show.sync="dialogFormVisible" @on-ok="dialogFormVisible = false" @on-cancel="dialogFormVisible = false">
          <img v-if="imgUrl" :src="imgUrl">
        </FormDialog>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>我的操作</span>
        </div>
        <el-form ref="approveform" :model="approveform" :rules="rules" label-width="120px">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="审批意见" prop="approvalComments">
                <el-input v-model="approveform.approvalComments" type="textarea" :rows="2" placeholder="请填写审批意见" />
              </el-form-item>
            </el-col>
            <el-col :offset="10" :span="4">
              <el-button-group>
                <el-button size="mini" icon="el-icon-arrow-left" @click="pass(true)">同意</el-button>
                <el-button size="mini" @click="pass(false)">不同意<i class="el-icon-arrow-right el-icon--right" /></el-button>
              </el-button-group>
            </el-col>
          </el-row>
        </el-form>
        <el-drawer title="历史审批内容" :visible.sync="drawer">
          <div class="block">
            <el-timeline :reverse="false">
              <el-timeline-item
                v-for="(activity, index) in historyList"
                :key="index"
                :timestamp="activity.startTime"
              >
                节点：{{ activity.taskName }}
                -->{{ activity.content }}
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-drawer>
      </el-card>
    </div>
  </div>
</template>

<script>

import { detail, processImage, approve, history, toBack } from '@neu/dcam-ui/api/outboundProcess'
import FormDialog from '@neu/biz-core/components/FormDialog'
export default {
  name: 'Approve',
  components: {
    FormDialog
  },
  props: {
    processDefinitionId: {
      type: String,
      default: ''
    },
    code: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 历史抽屉
      drawer: false,
      // 历史数据
      historyList: [],
      formItem: {},
      approveform: {
        approvalComments: '',
        code: this.code,
        nodeId: '',
        passFlag: false
      },
      // 表单验证规则
      rules: {
        approvalComments: [{
          required: true,
          message: '审批意见不能为空',
          trigger: 'blur'
        }]
      },
      insideColumns: [
        { title: '状态', width: 60, key: 'statusDesc', display: true },
        { title: '来源', width: 60, key: 'sourceDesc', display: true },
        { title: '名称', width: 180, key: 'name', sortable: 'custom', display: true },
        { title: '编码', width: 200, key: 'code', sortable: 'custom', display: true },
        { title: '条码', width: 90, key: 'sequence', sortable: 'custom', display: true },
        { title: '位置', width: 60, key: 'locationName', display: true },
        { title: '类型', width: 60, key: 'assetTypeName', display: true },
        { title: '型号', width: 60, key: 'productName', display: true },
        { title: '计量单位', width: 100, key: 'measureUnit', sortable: 'custom', display: true },
        { title: '金额', width: 70, key: 'money', sortable: 'custom', display: true },
        { title: '使用部门', width: 100, key: 'orgName', sortable: 'custom', display: true },
        { title: '使用人', width: 90, key: 'userName', sortable: 'custom', display: true },
        { title: '使用期限（月）', width: 140, key: 'month', sortable: 'custom', display: true },
        { title: '供应商', width: 90, key: 'manufacturerName', display: true },
        { title: '供应商联系人', width: 130, key: 'manufacturerPerson', display: true },
        { title: '供应商联系电话', width: 140, key: 'manufacturerPhone', display: true },
        { title: '合同名称', width: 100, key: 'contractName', display: true },
        { title: '维保负责人', width: 120, key: 'maintenanceUserName', display: true },
        { title: '维保说明', width: 200, key: 'maintenanceNote', display: true }
      ],
      imgUrl: '',
      dialogFormVisible: false
    }
  },
  created() {
    if (this.code) {
      detail(this.code).then(res => {
        this.formItem = res.data
      })
    }
  },
  methods: {
    /** 通过 */
    pass(flag) {
      this.$refs.approveform.validate((valid) => {
        if (valid) {
          this.approveform.passFlag = flag
          this.$confirm('确定要确认此流程', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            approve(this.code, this.approveform).then(res => {
              this.$message({
                type: 'success',
                message: '确认成功!'
              })
              this.$router.push({ name: 'dcam_todo' })
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消确认'
            })
          })
        }
      })
    },
    /** 流程图片 */
    processImg() {
      this.dialogFormVisible = true
      processImage(this.code, this.approveform).then(res => {
        this.imgUrl = window.URL.createObjectURL(res)
      })
    },
    /** 历史审批 */
    openHistory() {
      this.drawer = true
      history(this.code).then(res => {
        this.historyList = res.data
      })
    }
  }
}
</script>
